﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="bsasper.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" href="Content/bootstrap.css" rel="stylesheet" />
    <link type="text/css" href="Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server" style="width: 500px; margin: 50px auto 0 auto">

        <div>
            <div class="form-horizontal">
                <div class="form-group">
                    <label for="txtCode" class="col-sm-2 control-label">Code</label>
                    <div class="col-sm-10">
                        <asp:TextBox runat="server" ID="txtCode" CssClass="form-control" placeholder="A number between 100 and 200"></asp:TextBox>
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtCode" Display="Dynamic" Text="Required"></asp:RequiredFieldValidator>
                        <asp:RangeValidator runat="server" Type="Integer" ControlToValidate="txtCode" Display="Dynamic"
                            MinimumValue="100" MaximumValue="200" Text="Enter a number between 100 & 200"></asp:RangeValidator>
                        <asp:CustomValidator runat="server" ID="ServerSideValidator" ControlToValidate="txtCode"
                            OnServerValidate="ServerSideValidator_ServerValidate" Display="Dynamic"
                            Text="Actually, the number has to be 150!"></asp:CustomValidator>
                    </div>
                </div>

                <div class="form-group">
                    <label for="txtSiteUrl" class="col-sm-2 control-label">Site Url</label>
                    <div class="col-sm-10">
                        <asp:TextBox runat="server" ID="txtSiteUrl" CssClass="form-control" placeholder="Enter a url starting with http..."></asp:TextBox>
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtSiteUrl" Display="Dynamic" Text="Required"></asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator runat="server" ControlToValidate="txtSiteUrl"
                            ValidationExpression="^(http[\s\S]{1,200})" Text="It must start with http" Display="Dynamic">
                        </asp:RegularExpressionValidator>
                    </div>
                </div>

                <div class="col-sm-offset-2">
                    <asp:Button runat="server" ID="Button1" CssClass="btn btn-default" OnClick="Button1_Click" Text="Submit" />
                </div>

                <p style="margin-top: 20px;">
                    To demonstrate the use of the beforeShowFirst() callback, scroll to the bottom and click the button there. 
                    You will see that the page scrolls to the top before displaying the errors.
                </p>

                <div class="col-sm-offset-2" style="margin-top: 500px; margin-bottom: 50px;">
                    <asp:Button runat="server" ID="Button2" CssClass="btn btn-default" OnClick="Button1_Click" Text="Submit" />
                </div>

            </div>
        </div>

        <asp:ScriptManager runat="server" EnableCdn="false">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
            </Scripts>
        </asp:ScriptManager>

        <script type="text/javascript" src="Scripts/WebForms/WebForms.js"></script>
        <script type="text/javascript" src="Scripts/WebForms/WebUIValidation.js"></script>
        <script type="text/javascript" src="Scripts/bsasper.js"></script>
        <script type="text/javascript">
            $(function () {
                $("input[type=text], textarea").bsasper({
                    beforeShowFirst: function () {
                        $('html,body').scrollTop(0);
                    }
                });
            });
        </script>

    </form>
</body>
</html>
